var ul = document.querySelector('ul')
var section = document.querySelector('section')
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://chst.vip:1234/api/getinlanddiscount')
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // console.log(xhr.responseText)
        var x = JSON.parse(xhr.responseText).result
        console.log(x)
        var html = ""
        x.forEach(item => {
            html += `<li value=${item.productId}>
            ${item.productImg}
            <b>${item.productName}</b>
            <p>${item.productPrice}</p>
            <span>${item.productFrom}|${item.productTime}</span>
        </li>`
        });
        // console.log(html)
        ul.innerHTML = html
        //    console.log(ul)
        //获取到section中的所有li  设置属性
        var secli = document.querySelectorAll('section>ul>li')
        // console.log(secli)
        secli.forEach((item) => {
            item.style.height = '8.125rem'
            item.style.width = "50%"
            item.style.float = "left"
            item.style.border = ".01rem solid #ccc"
            item.style.boxSizing = 'border-box'
            item.style.position = "relative"
            item.onclick = function () {
                var productid = this.getAttribute('value')
                location.href = `./3跳转页.html?productid=${productid}`
            }
        })
        //获取所有的img  设置属性
        var secimg = document.querySelectorAll('section>ul>li>img')
        // console.log(secimg)
        secimg.forEach((item) => {
            item.style.width = "3.733rem"

            item.style.position = "absolute"
            item.style.left = ".6rem"
            item.style.top = "1rem"
        })
        //获取所有的b标签设置属性
        var secb = document.querySelectorAll('section>ul>li>b')
        // console.log(secb)
        secb.forEach((item) => {
            item.style.width = '4.5226rem'
            item.style.display = 'block'
            item.style.font = '.42667rem/.56rem ""'
            item.style.position = "absolute"
            item.style.left = ".2rem"
            item.style.top = "4.8rem"

        })
        //获取所有的p标签设置属性
        var secp = document.querySelectorAll('section>ul>li>p')
        secp.forEach((item) => {
            item.style.width = '4.5226rem'
            item.style.position = "absolute"
            item.style.left = ".2rem"
            item.style.top = "6.6rem"
            item.style.color = "orange"
            item.style.font = '.42667rem/.56rem ""'
        })
        var secspan = document.querySelectorAll('section>ul>li>span')
        secspan.forEach((item) => {
            item.style.width = '4.5226rem'
            item.style.display = 'block'
            item.style.position = "absolute"
            item.style.left = ".2rem"
            item.style.top = "7.2rem"
            item.style.color = "#666"
        })
    }
}
//判定是否满足懒加载条件
function fn(hanshu, yuzhi) {
    var flag = true
    window.onscroll = function () {

        var scrollTop = document.documentElement.scrollTop
        console.log(scrollTop)
        var scrollHeight = document.documentElement.scrollHeight
        var clientHeight = document.documentElement.clientHeight
        var cha = scrollHeight - scrollTop - clientHeight
        console.log(cha)
        if (cha<= yuzhi) {
            if (flag) {
                flag = false
                setTimeout(()=>{
                    hanshu()
                },1000)
                
             
            }
        } else {
            flag = true
        }
    }
}
//懒加载函数及阈值
var num=-6
fn(function xn() {
    num+=6
    var xhr = new XMLHttpRequest()
    xhr.open('get', 'http://chst.vip:1234/api/getinlanddiscount')
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            if(num===18){
                var x = (JSON.parse(xhr.responseText).result).splice(num,2)
                num=-6
            }else{
                var x = (JSON.parse(xhr.responseText).result).splice(num,6)
            }
           
             console.log(x)
            var html = ""
            x.forEach(item => {
                html += `<li value=${item.productId}>
                ${item.productImg}
                <b>${item.productName}</b>
                <p>${item.productPrice}</p>
                <span>${item.productFrom}|${item.productTime}</span>
            </li>`
            });
            // console.log(html)
            var ul=document.createElement('ul')
            ul.innerHTML=html
            section.appendChild(ul)
            
            var secli = document.querySelectorAll('section>ul>li')
        // console.log(secli)
        secli.forEach((item) => {
            item.style.height = '8.125rem'
            item.style.width = "50%"
            item.style.float = "left"
            item.style.border = ".01rem solid #ccc"
            item.style.boxSizing = 'border-box'
            item.style.position = "relative"
            item.onclick = function () {
                var productid = this.getAttribute('value')
                location.href = `./3跳转页.html?productid=${productid}`
            }
        })
        //获取所有的img  设置属性
        var secimg = document.querySelectorAll('section>ul>li>img')
        // console.log(secimg)
        secimg.forEach((item) => {
            item.style.width = "3.733rem"

            item.style.position = "absolute"
            item.style.left = ".6rem"
            item.style.top = "1rem"
        })
        //获取所有的b标签设置属性
        var secb = document.querySelectorAll('section>ul>li>b')
        // console.log(secb)
        secb.forEach((item) => {
            item.style.width = '4.5226rem'
            item.style.display = 'block'
            item.style.font = '.42667rem/.56rem ""'
            item.style.position = "absolute"
            item.style.left = ".2rem"
            item.style.top = "4.8rem"

        })
        //获取所有的p标签设置属性
        var secp = document.querySelectorAll('section>ul>li>p')
        secp.forEach((item) => {
            item.style.width = '4.5226rem'
            item.style.position = "absolute"
            item.style.left = ".2rem"
            item.style.top = "6.6rem"
            item.style.color = "orange"
            item.style.font = '.42667rem/.56rem ""'
        })
        var secspan = document.querySelectorAll('section>ul>li>span')
        secspan.forEach((item) => {
            item.style.width = '4.5226rem'
            item.style.display = 'block'
            item.style.position = "absolute"
            item.style.left = ".2rem"
            item.style.top = "7.2rem"
            item.style.color = "#666"
        })
        } 
    }
}, 200)



//书写返回index.html功能
var fanhui = document.querySelector('header>a')
fanhui.onclick = function () {
    location.href = "../index.html"
}